// ECharts图表工具类
import * as echarts from 'echarts'

export class ChartUtils {
  constructor() {
    this.charts = new Map()
  }

  // 初始化图表
  initChart(containerId, options = {}) {
    const chart = echarts.init(document.getElementById(containerId))
    this.charts.set(containerId, chart)
    return chart
  }

  // 创建水质数据折线图
  createWaterQualityLineChart(containerId, data) {
    const chart = this.initChart(containerId)
    const option = {
      title: {
        text: '水质监测数据趋势',
        left: 'center',
        textStyle: {
          color: '#333',
          fontSize: 16
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      legend: {
        data: ['pH值', '温度', '浊度', '溶解氧', '总氮', '总磷', '电导率'],
        top: 30
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data.timeLabels || []
      },
      yAxis: {
        type: 'value',
        name: '数值',
        nameTextStyle: {
          color: '#666'
        }
      },
      series: [
        {
          name: 'pH值',
          type: 'line',
          data: data.phValues || [],
          smooth: true,
          lineStyle: {
            color: '#5470c6'
          }
        },
        {
          name: '温度',
          type: 'line',
          data: data.temperatureValues || [],
          smooth: true,
          lineStyle: {
            color: '#91cc75'
          }
        },
        {
          name: '浊度',
          type: 'line',
          data: data.turbidityValues || [],
          smooth: true,
          lineStyle: {
            color: '#fac858'
          }
        },
        {
          name: '溶解氧',
          type: 'line',
          data: data.dissolvedOxygenValues || [],
          smooth: true,
          lineStyle: {
            color: '#ee6666'
          }
        },
        {
          name: '总氮',
          type: 'line',
          data: data.totalNitrogenValues || [],
          smooth: true,
          lineStyle: {
            color: '#73c0de'
          }
        },
        {
          name: '总磷',
          type: 'line',
          data: data.totalPhosphorusValues || [],
          smooth: true,
          lineStyle: {
            color: '#3ba272'
          }
        },
        {
          name: '电导率',
          type: 'line',
          data: data.conductivityValues || [],
          smooth: true,
          lineStyle: {
            color: '#fc8452'
          }
        }
      ]
    }
    
    chart.setOption(option)
    return chart
  }

  // 创建设备状态饼图
  createDeviceStatusPieChart(containerId, data) {
    const chart = this.initChart(containerId)
    const option = {
      title: {
        text: '设备状态分布',
        left: 'center',
        textStyle: {
          color: '#333',
          fontSize: 16
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        top: 'middle'
      },
      series: [
        {
          name: '设备状态',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['60%', '50%'],
          data: [
            { value: data.online || 0, name: '在线', itemStyle: { color: '#4cd964' } },
            { value: data.offline || 0, name: '离线', itemStyle: { color: '#999999' } },
            { value: data.fault || 0, name: '故障', itemStyle: { color: '#dd524d' } }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    
    chart.setOption(option)
    return chart
  }

  // 创建告警统计柱状图
  createAlertBarChart(containerId, data) {
    const chart = this.initChart(containerId)
    const option = {
      title: {
        text: '告警统计',
        left: 'center',
        textStyle: {
          color: '#333',
          fontSize: 16
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['未处理', '已确认', '已处理'],
        top: 30
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: data.categories || []
      },
      yAxis: {
        type: 'value',
        name: '数量',
        nameTextStyle: {
          color: '#666'
        }
      },
      series: [
        {
          name: '未处理',
          type: 'bar',
          data: data.unhandled || [],
          itemStyle: {
            color: '#dd524d'
          }
        },
        {
          name: '已确认',
          type: 'bar',
          data: data.confirmed || [],
          itemStyle: {
            color: '#f0ad4e'
          }
        },
        {
          name: '已处理',
          type: 'bar',
          data: data.handled || [],
          itemStyle: {
            color: '#4cd964'
          }
        }
      ]
    }
    
    chart.setOption(option)
    return chart
  }

  // 创建水质指标雷达图
  createWaterQualityRadarChart(containerId, data) {
    const chart = this.initChart(containerId)
    const option = {
      title: {
        text: '水质指标雷达图',
        left: 'center',
        textStyle: {
          color: '#333',
          fontSize: 16
        }
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        data: ['当前值', '标准值'],
        top: 30
      },
      radar: {
        indicator: [
          { name: 'pH值', max: 14 },
          { name: '温度', max: 40 },
          { name: '浊度', max: 100 },
          { name: '溶解氧', max: 20 },
          { name: '总氮', max: 10 },
          { name: '总磷', max: 5 },
          { name: '电导率', max: 2000 }
        ]
      },
      series: [
        {
          name: '水质指标',
          type: 'radar',
          data: [
            {
              value: data.currentValues || [],
              name: '当前值',
              itemStyle: {
                color: '#5470c6'
              }
            },
            {
              value: data.standardValues || [],
              name: '标准值',
              itemStyle: {
                color: '#91cc75'
              }
            }
          ]
        }
      ]
    }
    
    chart.setOption(option)
    return chart
  }

  // 创建实时数据仪表盘
  createRealtimeGaugeChart(containerId, data) {
    const chart = this.initChart(containerId)
    const option = {
      title: {
        text: '实时水质数据',
        left: 'center',
        textStyle: {
          color: '#333',
          fontSize: 16
        }
      },
      series: [
        {
          name: 'pH值',
          type: 'gauge',
          center: ['25%', '60%'],
          radius: '50%',
          min: 0,
          max: 14,
          splitNumber: 14,
          axisLine: {
            lineStyle: {
              width: 8,
              color: [
                [0.3, '#67e0e3'],
                [0.7, '#37a2da'],
                [1, '#fd666d']
              ]
            }
          },
          pointer: {
            itemStyle: {
              color: 'auto'
            }
          },
          axisTick: {
            distance: -30,
            splitNumber: 5,
            lineStyle: {
              width: 2,
              color: '#999'
            }
          },
          splitLine: {
            distance: -30,
            length: 30,
            lineStyle: {
              width: 4,
              color: '#999'
            }
          },
          axisLabel: {
            color: 'auto',
            distance: 40,
            fontSize: 12
          },
          detail: {
            valueAnimation: true,
            formatter: '{value}',
            color: 'auto',
            fontSize: 16
          },
          data: [
            {
              value: data.phValue || 0,
              name: 'pH值'
            }
          ]
        },
        {
          name: '温度',
          type: 'gauge',
          center: ['75%', '60%'],
          radius: '50%',
          min: 0,
          max: 40,
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              width: 8,
              color: [
                [0.3, '#67e0e3'],
                [0.7, '#37a2da'],
                [1, '#fd666d']
              ]
            }
          },
          pointer: {
            itemStyle: {
              color: 'auto'
            }
          },
          axisTick: {
            distance: -30,
            splitNumber: 5,
            lineStyle: {
              width: 2,
              color: '#999'
            }
          },
          splitLine: {
            distance: -30,
            length: 30,
            lineStyle: {
              width: 4,
              color: '#999'
            }
          },
          axisLabel: {
            color: 'auto',
            distance: 40,
            fontSize: 12
          },
          detail: {
            valueAnimation: true,
            formatter: '{value}°C',
            color: 'auto',
            fontSize: 16
          },
          data: [
            {
              value: data.temperature || 0,
              name: '温度'
            }
          ]
        }
      ]
    }
    
    chart.setOption(option)
    return chart
  }

  // 销毁图表
  destroyChart(containerId) {
    const chart = this.charts.get(containerId)
    if (chart) {
      chart.dispose()
      this.charts.delete(containerId)
    }
  }

  // 销毁所有图表
  destroyAllCharts() {
    this.charts.forEach((chart, containerId) => {
      chart.dispose()
    })
    this.charts.clear()
  }
}
